<template>
  <view class="provider-page">
    <!-- 商家头部信息 -->
    <view class="provider-header">
      <view class="provider-info">
        <image :src="providerInfo.avatar" class="provider-info__avatar" />
        <view class="provider-info__content">
          <view class="provider-info__name">{{ providerInfo.name }}</view>
          <view class="provider-info__rating">
            <text v-for="n in 5" :key="n" class="provider-info__star">
              {{ n <= providerInfo.rating ? '★' : '☆' }}
            </text>
            <text class="provider-info__score">{{ providerInfo.rating.toFixed(1) }}</text>
          </view>
          <view class="provider-info__desc">{{ providerInfo.description }}</view>
        </view>
      </view>
      <view class="provider-data">
        <view class="provider-data__item">
          <text class="provider-data__value">{{ providerInfo.orderCount }}</text>
          <text class="provider-data__label">总服务数</text>
        </view>
        <view class="provider-data__divider"></view>
        <view class="provider-data__item">
          <text class="provider-data__value">{{ providerInfo.followCount }}</text>
          <text class="provider-data__label">粉丝数</text>
        </view>
      </view>
      <view class="provider-actions">
        <button 
          class="provider-actions__btn"
          :class="{'provider-actions__btn--active': isFollowed}"
          @click="toggleFollow"
        >
          {{ isFollowed ? '已关注' : '+ 关注' }}
        </button>
        <button class="provider-actions__btn provider-actions__btn--primary" @click="contactProvider">
          联系商家
        </button>
      </view>
    </view>
    
    <!-- 商家选项卡 -->
    <view class="provider-tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="provider-tab"
        :class="{'provider-tab--active': activeTabIndex === index}"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>
    
    <!-- 商家服务列表 -->
    <view class="provider-content" v-if="activeTabIndex === 0">
      <view class="service-list">
        <view 
          v-for="(item, index) in providerServices" 
          :key="index" 
          class="service-item"
          @click="goToServiceDetail(item.id)"
        >
          <image :src="item.image" mode="aspectFill" class="service-item__image" />
          <view class="service-item__content">
            <view class="service-item__title">{{ item.title }}</view>
            <view class="service-item__desc">{{ item.description }}</view>
            <view class="service-item__bottom">
              <text class="service-item__price">{{ item.price }}</text>
              <text class="service-item__sales">{{ item.sales }}人已下单</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 商家介绍 -->
    <view class="provider-content" v-else-if="activeTabIndex === 1">
      <view class="provider-about">
        <view class="provider-about__section">
          <view class="provider-about__title">商家介绍</view>
          <view class="provider-about__text">{{ providerInfo.introduction }}</view>
        </view>
        
        <view class="provider-about__section">
          <view class="provider-about__title">商家资质</view>
          <view class="provider-about__qualification">
            <image 
              v-for="(item, index) in providerInfo.qualifications" 
              :key="index"
              :src="item"
              mode="aspectFill"
              class="provider-about__qualification-image"
            />
          </view>
        </view>
        
        <view class="provider-about__section">
          <view class="provider-about__title">服务范围</view>
          <view class="provider-about__text">{{ providerInfo.serviceArea }}</view>
        </view>
        
        <view class="provider-about__section">
          <view class="provider-about__title">营业时间</view>
          <view class="provider-about__text">{{ providerInfo.businessHours }}</view>
        </view>
      </view>
    </view>
    
    <!-- 商家评价 -->
    <view class="provider-content" v-else-if="activeTabIndex === 2">
      <view class="provider-reviews">
        <view class="provider-reviews__summary">
          <view class="provider-reviews__overall">
            <text class="provider-reviews__score">{{ providerInfo.rating.toFixed(1) }}</text>
            <view class="provider-reviews__stars">
              <text v-for="n in 5" :key="n" class="provider-reviews__star">
                {{ n <= providerInfo.rating ? '★' : '☆' }}
              </text>
            </view>
            <text class="provider-reviews__count">{{ providerInfo.reviewCount }}条评价</text>
          </view>
          <view class="provider-reviews__tags">
            <view 
              v-for="(tag, index) in reviewTags" 
              :key="index"
              class="provider-reviews__tag"
            >
              {{ tag.name }}({{ tag.count }})
            </view>
          </view>
        </view>
        
        <view class="provider-reviews__list">
          <view 
            v-for="(review, index) in reviews" 
            :key="index"
            class="review-item"
          >
            <view class="review-item__header">
              <image :src="review.avatar" class="review-item__avatar" />
              <view class="review-item__user">
                <text class="review-item__name">{{ review.username }}</text>
                <text class="review-item__time">{{ review.time }}</text>
              </view>
              <view class="review-item__rating">
                <text v-for="n in 5" :key="n" class="review-item__star">
                  {{ n <= review.rating ? '★' : '☆' }}
                </text>
              </view>
            </view>
            <view class="review-item__content">{{ review.content }}</view>
            <view class="review-item__images" v-if="review.images && review.images.length > 0">
              <image 
                v-for="(img, imgIndex) in review.images" 
                :key="imgIndex"
                :src="img"
                mode="aspectFill"
                class="review-item__image"
                @click="previewImage(review.images, imgIndex)"
              />
            </view>
            <view class="review-item__service">
              <text>评价服务：{{ review.service }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 提供者信息
const providerInfo = reactive({
  id: 1,
  name: '互成一家服务中心',
  avatar: 'https://picsum.photos/seed/provider1/100/100',
  rating: 4.8,
  description: '专注于校园生活服务，提供快递代取、打印、跑腿等多种服务',
  orderCount: 5382,
  followCount: 1256,
  introduction: '互成一家服务中心成立于2022年，是一家专注于为大学生提供便捷服务的平台。我们拥有一支专业的服务团队，为学生提供快递代取、打印、跑腿、学习辅导等多种服务，致力于让校园生活更加便捷。',
  qualifications: [
    'https://picsum.photos/seed/qual1/300/200',
    'https://picsum.photos/seed/qual2/300/200'
  ],
  serviceArea: '校内所有宿舍楼、教学楼、图书馆等区域',
  businessHours: '周一至周日 8:00-22:00',
  reviewCount: 1235
});

// 是否已关注
const isFollowed = ref(false);

// 选项卡
const tabs = [
  { name: '全部服务' },
  { name: '商家介绍' },
  { name: '用户评价' }
];

// 当前选中的选项卡索引
const activeTabIndex = ref(0);

// 提供者的服务列表
const providerServices = ref([
  { 
    id: 1, 
    title: '快递代拿服务', 
    description: '校内各快递点代拿，30分钟内送达',
    image: 'https://picsum.photos/seed/service1/300/200', 
    price: '¥3起', 
    sales: 235
  },
  { 
    id: 2, 
    title: '远程打印服务 黑白/彩印', 
    description: '远程发送文档，快速打印配送',
    image: 'https://picsum.photos/seed/service2/300/200', 
    price: '¥0.5/页起', 
    sales: 189
  },
  { 
    id: 3, 
    title: '刷乐跑跑腿服务', 
    description: '帮你完成体育锻炼任务，保障达标',
    image: 'https://picsum.photos/seed/service3/300/200', 
    price: '¥8起/公里', 
    sales: 125
  },
  { 
    id: 4, 
    title: '毕业设计辅导', 
    description: '专业辅导毕业设计，保证质量',
    image: 'https://picsum.photos/seed/service4/300/200', 
    price: '¥200起', 
    sales: 78
  }
]);

// 评价标签
const reviewTags = ref([
  { name: '服务态度好', count: 856 },
  { name: '上门速度快', count: 753 },
  { name: '服务质量高', count: 587 },
  { name: '专业技能强', count: 423 },
  { name: '沟通很顺畅', count: 368 }
]);

// 评价列表
const reviews = ref([
  {
    username: '张同学',
    avatar: 'https://picsum.photos/seed/user1/100/100',
    time: '2025-04-28',
    rating: 5,
    content: '服务很好，速度很快，15分钟就送到了，下次还会再来！快递包装完好无损，小哥态度也很好。',
    images: [
      'https://picsum.photos/seed/review1_1/200/200',
      'https://picsum.photos/seed/review1_2/200/200'
    ],
    service: '快递代拿服务'
  },
  {
    username: '李同学',
    avatar: 'https://picsum.photos/seed/user2/100/100',
    time: '2025-04-25',
    rating: 4,
    content: '打印质量不错，配送也挺快的，就是价格稍微有点贵，希望能有些优惠活动。总体来说还是很满意的。',
    images: [],
    service: '远程打印服务'
  },
  {
    username: '王同学',
    avatar: 'https://picsum.photos/seed/user3/100/100',
    time: '2025-04-20',
    rating: 5,
    content: '辅导老师专业水平很高，对我的毕业设计提供了很多宝贵意见，最终顺利通过答辩，非常感谢！',
    images: [
      'https://picsum.photos/seed/review3_1/200/200'
    ],
    service: '毕业设计辅导'
  }
]);

// 页面加载
onMounted(() => {
  // 获取URL参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  if (options && options.id) {
    console.log('加载服务商ID:', options.id);
    // 根据ID加载服务商信息
    fetchProviderDetail(options.id);
  }
});

// 加载服务商详情
const fetchProviderDetail = (id) => {
  console.log(`加载ID为${id}的服务商详情`);
  // 实际项目中应该从API加载数据
  // 这里仅作示例
};

// 切换关注状态
const toggleFollow = () => {
  isFollowed.value = !isFollowed.value;
  
  uni.showToast({
    title: isFollowed.value ? '关注成功' : '已取消关注',
    icon: 'success'
  });
};

// 联系商家
const contactProvider = () => {
  uni.showModal({
    title: '联系方式',
    content: '商家电话：123-4567-8910\n微信：service_who_family',
    showCancel: false
  });
};

// 切换选项卡
const switchTab = (index) => {
  activeTabIndex.value = index;
};

// 跳转到服务详情
const goToServiceDetail = (serviceId) => {
  uni.navigateTo({
    url: `/pages/service/detail?id=${serviceId}`
  });
};

// 预览图片
const previewImage = (images, current) => {
  uni.previewImage({
    urls: images,
    current: images[current]
  });
};
</script>

<style lang="scss" scoped>
.provider-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.provider-header {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
}

.provider-info {
  display: flex;
  margin-bottom: 15px;
  
  &__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
  }
  
  &__content {
    flex: 1;
  }
  
  &__name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }
  
  &__rating {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  
  &__star {
    color: #ff9800;
    font-size: 14px;
  }
  
  &__score {
    font-size: 14px;
    color: #ff9800;
    margin-left: 5px;
  }
  
  &__desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
  }
}

.provider-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 15px;
  
  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }
  
  &__value {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }
  
  &__label {
    font-size: 13px;
    color: #666;
  }
  
  &__divider {
    width: 1px;
    height: 30px;
    background-color: #f0f0f0;
  }
}

.provider-actions {
  display: flex;
  
  &__btn {
    flex: 1;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border-radius: 20px;
    margin: 0 5px;
    background-color: #f5f5f5;
    color: #666;
    
    &--active {
      background-color: #e6f7ef;
      color: #07c160;
    }
    
    &--primary {
      background-color: #07c160;
      color: #ffffff;
    }
  }
}

.provider-tabs {
  display: flex;
  background-color: #ffffff;
  margin-bottom: 10px;
}

.provider-tab {
  flex: 1;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  color: #666;
  position: relative;
  
  &--active {
    color: #07c160;
    font-weight: 500;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background-color: #07c160;
      border-radius: 2px;
    }
  }
}

.provider-content {
  background-color: #ffffff;
  min-height: 300px;
}

.service-list {
  padding: 10px 15px;
}

.service-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &__image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin-right: 10px;
  }
  
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
  }
  
  &__desc {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
    flex: 1;
  }
  
  &__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  &__price {
    font-size: 16px;
    font-weight: bold;
    color: #ff6b6b;
  }
  
  &__sales {
    font-size: 12px;
    color: #999;
  }
}

.provider-about {
  padding: 15px;
  
  &__section {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  &__title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
    position: relative;
    padding-left: 10px;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      background-color: #07c160;
      border-radius: 1.5px;
    }
  }
  
  &__text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
  }
  
  &__qualification {
    display: flex;
    flex-wrap: wrap;
  }
  
  &__qualification-image {
    width: 120px;
    height: 80px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.provider-reviews {
  padding: 15px;
  
  &__summary {
    margin-bottom: 20px;
  }
  
  &__overall {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  &__score {
    font-size: 28px;
    font-weight: bold;
    color: #ff9800;
    margin-right: 10px;
  }
  
  &__stars {
    margin-right: 10px;
  }
  
  &__star {
    color: #ff9800;
    font-size: 16px;
  }
  
  &__count {
    font-size: 13px;
    color: #999;
  }
  
  &__tags {
    display: flex;
    flex-wrap: wrap;
  }
  
  &__tag {
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    background-color: #f5f5f5;
    border-radius: 14px;
    font-size: 12px;
    color: #666;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &__header {
    display: flex;
    margin-bottom: 10px;
  }
  
  &__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  &__user {
    flex: 1;
  }
  
  &__name {
    font-size: 14px;
    color: #333;
    margin-bottom: 3px;
    display: block;
  }
  
  &__time {
    font-size: 12px;
    color: #999;
  }
  
  &__rating {
    display: flex;
  }
  
  &__star {
    color: #ff9800;
    font-size: 14px;
  }
  
  &__content {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  
  &__images {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  
  &__image {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  &__service {
    font-size: 12px;
    color: #999;
  }
}
</style>
